<template>
  <view class="container">
    <view class="header_search_box">
      <view class="header_search">
        <view class="header_search_left">
          <image src="/static/search.png" mode=""></image>
          <input
            v-model="search"
            placeholder-class="my-input-placeholder"
            class="search-input"
            type="text"
            placeholder="搜索"
          />
        </view>
        <view class="header_search_right" @click="searchCar">搜索</view>
      </view>
    </view>
    <view class="no-data" v-if="carList.length == 0">
      <image src="../../../static/empty.png" mode=""></image>
    </view>
    <view class="car-list" v-else>
      <view
        class="car-item"
        v-for="(item, index) in carList"
        :key="index"
        @click="carDetail(item)"
      >
        <view class="car-left">
          <image :src="item.cover_url" mode="widthFix"></image>
        </view>
        <view class="car-right">
          <view class="car-name">{{ item.cars_name }}</view>
          <view class="d-flex item-line2">
            <text>{{ item.cars_type || "" }} {{ item.appearance_interior || "" }}</text>
            <view class="new-car" v-if="item.cars_state == 1">新车</view>
            <view class="second-car" v-if="item.cars_state == 2">二手车</view>
          </view>
          <view class="tags">
            <text v-for="(tag, tagIndex) in item.label" :key="tagIndex">{{
              tag
            }}</text>
          </view>
          <view class="price d-flex">
            <text class="shoujia"
              >售价:{{ item.price }}<text v-if="item.price > 0">万</text>
            </text>
            <text class="zhidaojia" v-if="item.guide_price"
              >指导价:{{ item.guide_price }}万/{{ item.quotation_name }}</text
            >
          </view>
          <view class="item-bot d-flex">
            <view class="user">
              <text class="name"
                >{{ item.users_name }}
                <text v-if="item.city">{{ item.city }}</text>
              </text>
              <image v-if="item.icon_url" :src="item.icon_url" mode="heightFix"></image>
            </view>
            <text class="date">{{ item.create_time }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { searchResult } from "@/api/home.js";
import { getUsedCarDetails } from "@/api/secondhandCar.js";
export default {
  data() {
    return {
      search: "",
      users_id: uni.getStorageSync("login").id,
      carList: [],
      endName: "",
    };
  },
  onLoad(option) {
    this.search = option.search;
    this.init();
  },
  onPullDownRefresh() {
    this.init();
  },
  methods: {
    init() {
      searchResult(this.users_id, this.search).then((res) => {
        this.carList = res.data;
        uni.stopPullDownRefresh();
      });
    },
    searchCar() {
      this.init();
    },
    // 查看详情
    carDetail(item) {
      const that = this;
      if (item.cars_state == 1) {
        //新车
        uni.navigateTo({
          url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + item.id,
        });
      } else if (item.cars_state == 2) {
        //二手车
        getUsedCarDetails(item.id, this.users_id, this.endName).then((res) => {
          if (res.code == 0) {
            that.dataObject = res.data;
            uni.navigateTo({
              url:
                "/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=" +
                item.id +
                "&isContent=" +
                true,
              events: {
                // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                acceptDataFromOpenedPage: function (data) {
                  that.$utils.log(
                    "打印返回数据 acceptDataFromOpenedPage  " +
                      JSON.stringify(data)
                  );
                },
                someEvent: function (data) {
                  that.$utils.log(
                    "打印返回数据 someEvent   " + JSON.stringify(data)
                  );
                },
              },
              success: function (res) {
                that.$utils.log(
                  "打印发送数据 success   " + JSON.stringify(that.dataObject)
                );
                // 通过eventChannel向被打开页面传送数据
                res.eventChannel.emit(
                  "acceptDataFromOpenerPage",
                  that.dataObject
                );
              },
              fail: function (error) {
                that.$utils.log("打印发送数据 fail   " + JSON.stringify(error));
              },
            });
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // background-color: #fff;
  height: 100%;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333;
  .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      margin-top: 200rpx;
    }
  }
  .d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header_search_box {
    background-color: #fff;
    padding: 28rpx;
  }
  .header_search {
    height: 60rpx;
    background: #f6f8fa;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    .header_search_left {
      flex: 1;
      display: flex;
      align-items: center;
      image {
        width: 30rpx;
        height: 30rpx;
        margin-left: 27rpx;
      }
      input {
        flex: 1;
        padding: 0 15rpx;
        font-size: 30rpx;
      }
    }
    .header_search_right {
      margin-right: 6rpx;
      width: 112rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: #0e59ea;
      border-radius: 26rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
  }
  .car-list {
    padding: 20rpx 28rpx;
    .car-item {
      background-color: #fff;
      padding: 30rpx 20rpx;
      display: flex;
      border-radius: 14rpx;
      .car-left {
        image {
          width: 178rpx;
          max-height: 200rpx;
        }
      }
      .car-right {
        margin-left: 20rpx;
        width: calc(100% - 198rpx);
        .car-name {
          color: #000;
          font-weight: 800;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .item-line2 {
          margin-top: 20rpx;
          text {
            font-size: 24rpx;
          }
          view {
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 14rpx;
            font-size: 20rpx;
            &.new-car {
              background-color: #fff5cc;
            }
            &.second-car {
              background-color: #edf1ff;
            }
          }
        }
        .tags {
          font-size: 20rpx;
          color: #999;
          margin-top: 20rpx;
          text {
            margin-right: 10rpx;
          }
        }
        .price {
          margin-top: 15rpx;
          .shoujia {
            font-size: 32rpx;
            font-weight: 800;
            color: #ec4b4b;
          }
          .zhidaojia {
            font-size: 20rpx;
          }
        }
        .item-bot {
          margin-top: 15rpx;
          .user {
            display: flex;
            align-items: center;
            .name {
              font-size: 20rpx;
              margin-right: 20rpx;
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
            }
            image {
              height: 30rpx;
              max-width: 80rpx;
            }
          }
          .date {
            font-size: 20rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style>